<template>
  <view class="container">
    <!-- 头部 -->
    <!-- <view class="fixed-con">
      <statusBar></statusBar>
      <view class="go-back">
        <image src="../../static/go-back.svg" @click="goBack"/>
        <view>评论和@</view>
        <image class="img-hide" src="../../static/brands-search.svg"/>
      </view>
    </view> -->

    <navigationBar title="评论和@" backBarBorder="2rpx solid #F1F1F1"/>

    <view class="content">
      <view v-for="item in dataList.commentsAndAtList" :key="item.id">
        <!-- 回复了评论 或者 评论了帖子 -->
        <view class="item-comment" v-if="item.type == 1" @click="toPostDetails(item)">
          <image :src="item.avatarUrl"/>
          <view class="item-con">
            <view>
              <text>{{ item.nickName }}</text>
              <view>{{item.replyId == 0 ? '评论了您的帖子' : '回复了您的评论'}} <text>{{ functions.timeText(item.createdTime) }}</text> </view>
              <view>{{ item.content }}</view>
              <!-- <view>| {{ item.replyContent }}</view> -->
            </view>
            <image :src="item.banner[0]"/>
          </view>
        </view>
        <view class="item-comment item-posting" v-else @click="toPostDetails(item)">
          <image :src="item.avatarUrl"/>
          <view class="item-con">
            <view>
              <text>{{ item.nickName }}</text>
              <view>在评论中@了您 <text>{{ functions.timeText(item.createdTime) }}</text> </view>
            </view>
            <image :src="item.banner[0]"/>
          </view>
        </view>
      </view>

      <!-- 已经到底了 -->
      <view class="is-end" v-if="isEnd">没有更多了</view>

    </view>

    <view class="safe-padding"></view>

  </view>
  
</template>

<script setup>
  import { ref, watch, reactive, onMounted, nextTick } from 'vue';  
  import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";	
  import { myCommentsAndAtPages } from '@/api/user.js'
  import functions from '@/utils/functions.js'

  //是否加载结束
  const isEnd = ref(false)

  //分页数据
  const pageData = reactive({
    pageSize:10,
    page:1
  })

  const dataList = reactive({
    commentsAndAtList:[]
  })


  onMounted(() => {
    getCommentsAndAtPages()
  })

  onReachBottom(() => {
    if(isEnd.value) return;
    pageData.page++
    getCommentsAndAtPages()
  })

  const goBack = () => {
    uni.navigateBack({ delta: 1 })
  }

  //获取评论和@列表
  const getCommentsAndAtPages = async () => {
    let res = await myCommentsAndAtPages({ ...pageData })
    if (res.list.length < pageData.pageSize) isEnd.value = true
    // console.log('评论和@列表',res)
    dataList.commentsAndAtList = dataList.commentsAndAtList.concat(res.list)
  }

  const toPostDetails = (item) => {
    uni.navigateTo({ url: `/pages/postDetails/index?commentId=${item.id}&id=${item.articleId}` })
  }


  </script>

  <style lang="scss" scoped>
    .container{
      width: 100vw;
      height: 100vh;
      /* position: fixed;
      top: 0;
      left: 0; */
      /* padding: 0;
      margin: 0; */
      /* overflow-y: scroll; */

      .fixed-con{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        .go-back{
          width: 750rpx;
          height: 90rpx;
          padding:0 30rpx;
          box-sizing: border-box;
          background-color: white;
          border-bottom: 2rpx solid #F1F1F1;
          @include flex(row,space-between,center);
          image{
            width: 40rpx;
            height: 40rpx;
          }
          view{
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
          }
          .img-hide{
            opacity: 0;
          }
        }
      }

      .content{
        padding-top: calc(var(--status-bar-height) + 90rpx);
        .item-comment{
          width: 750rpx;
          /* height: 176rpx; */
          background: white;
          padding: 32rpx 0 0 30rpx;
          box-sizing: border-box;
          @include flex(row,flex-start,flex-start);

          image{
            width: 80rpx; 
            height: 80rpx;
            border-radius: 40rpx;
            margin-right: 32rpx;
          }

          .item-con{
            flex:1;
            height: 100%;
            border-bottom:2rpx solid #F1F1F1; 
            padding-bottom: 32rpx;
            @include flex(row,space-between,flex-start);

            >view{
              @include flex(column,flex-start,flex-start);

              >text:nth-of-type(1){
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 30rpx;
                color: #222222;
              }
              >view:nth-of-type(1){
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #848484;
                margin: 8rpx 0;

                text{
                  margin-left: 8rpx;
                }
              }
              >view:nth-of-type(2){
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #333333;
              }
              >view:nth-of-type(3){
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #848484;
              }
            }

            >image{
              width: 80rpx;
              height: 80rpx;
              margin-right: 30rpx;
              border-radius: 5rpx;
            }
          }

        }

        .item-posting{
          height: 144rpx;

          .item-con{
            padding-bottom: 0;
          }
        }
      } 

      .is-end{
        text-align: center;
        margin: 20rpx;
        color: #8a8a8a;
      }

    }
  </style>